<template>
  <v-container class="mt-0 pt-0 mb-15">
    <v-list two-line>
      <v-divider></v-divider>
      <v-subheader>
        关注的人
      </v-subheader>


      <v-list-item
          v-if="users"
          :key="item.title"
          v-for="(item, index) in users"
          @click="$router.push('/userInfo/'+item.uid)"
      >
        <v-list-item-avatar size="50">
          <v-img :src="getImg(item.avatar)"></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>{{item.nickname}}</v-list-item-title>
          <v-list-item-subtitle>{{item.subscriberCount}}个关注 {{item.articleCount}}篇文章</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-card-subtitle v-if="!(users.length||loadingSubscribes)" class="text-center">还没有关注用户哦</v-card-subtitle>
      <load-more :loading="loadingSubscribes" v-if="hasMoreSubscribes" @onLoadMore="getSubscribes"></load-more>
    </v-list>
  </v-container>
</template>

<script>
import {getImg} from "../util/util";
import LoadMore from "./LoadMore";

export default {
  name: "Subscribes",
  props:['fromUid'],
  components: {LoadMore},
  data: () => ({
    users:[],
    loadingSubscribes:false,
    hasMoreSubscribes:true,
    subscribePage:{
      page:0,
      row:5
    }
  }),
  methods: {
    getSubscribes(){
      this.loadingSubscribes = true
      let data = {
        fromUid:this.fromUid,
        page:1,
        row:(this.subscribePage.page+=1)*this.subscribePage.row
      }
      this.$http.post('subscribe/listSubscribes', data).then(res => {
        this.users = res.data || []
        this.loadingSubscribes = false
          this.hasMoreSubscribes = ! (res.total===this.users.length)
      }).catch(res => {
        this.$emit("toast", res.msg)
        this.loadingSubscribes = false
      })
    },
    getImg,
  },
  mounted() {
    this.getSubscribes();
  }
}
</script>

<style scoped>

</style>
